<template>
  <div style="margin-top: 0px">
    <el-form :model="formValue" ref="appJobFormEl" :rules="rules" label-width="100px"
      style="width: 80%; margin-top: 0px">
      <el-form-item label="表单类型">
        <el-radio-group v-model="formValue.formType">
          <el-radio label="dialog">弹窗式表单（适用于字段较少的页面）</el-radio>
          <el-radio label="page">独立页面表单（字段较多的页面）</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="formValue.formType === 'page'" label="表单页路由url" prop="formPageUrl">
        <el-input v-model="formValue.formPageUrl" placeholder="/xxx/xx"></el-input>
      </el-form-item>

      <el-form-item label="输出文件名" prop="fileName">
        <el-input v-model="formValue.fileName" placeholder="不包含文件后缀"></el-input>
      </el-form-item>

      <el-form-item label="对象名称" prop="domainCnName">
        <el-input v-model="formValue.domainCnName" placeholder="中文名称"></el-input>
      </el-form-item>

      <el-form-item label="查询列表 url" prop="listUrl">
        <el-input v-model="formValue.listUrl" placeholder="/xxx-api/xxx/xxxRpc/selectAll.json"></el-input>
      </el-form-item>
      <el-form-item label="详情页 url" prop="detailUrl">
        <el-input v-model="formValue.detailUrl" placeholder="/xxx-api/xxx/xxxRpc/detail.json"></el-input>
      </el-form-item>
      <el-form-item label="删除 url" prop="delUrl">
        <el-input v-model="formValue.delUrl" placeholder="/xxx-api/xxx/xxxRpc/remove.json"></el-input>
      </el-form-item>
      <el-form-item label="提交 url" prop="submitUrl">
        <el-input v-model="formValue.submitUrl" placeholder="/xxx-api/xxx/xxxRpc/saveUpdate.json"></el-input>
      </el-form-item>

      <el-form-item label="" prop="codeContent">
        <template slot="label">java bean<br />
          代码片段
          <br />
          <el-popover placement="left" width="240" trigger="hover">
            <pre>
/**
 * 姓名 
 */
private String name;

/**
 * 昵称
 */
private String nickname;

/**
 * 邮箱
 */
private String email;

/**
 * 手机号
 */
private Long phone; 

/**
 * 生日
 */
private Date birth; 
</pre>
            <el-button slot="reference" type="text" class="el-icon-question">示例</el-button>
          </el-popover>
        </template>
        <el-input v-model="formValue.codeContent" type="textarea" :rows="10"></el-input>
      </el-form-item>

      <el-form-item label="页面搜索条件">
        <el-cascader placeholder="选择要添加的搜索条件类型" :value="[]" :options="searchOptions"
          @change="searchHandleChange"></el-cascader>
        <div v-for="(item, index) in searchForm.main" :key="index" class="searchItemDiv">

          <el-row>
            <el-col :span="2">{{ index + 1 }}.</el-col>
            <el-col :span="4">{{ item.type }}</el-col>
            <el-col :span="4">
              <el-input v-model="item.label" clearable placeholder="名称" /></el-col>
            <el-col :span="4"><el-input v-model="item.key" clearable placeholder="Key值" /></el-col>
            <el-col :span="4"><el-button type="danger" @click="searchForm.main.splice(index, 1)">删除</el-button></el-col>
            <el-col :span="4">
              <el-popover placement="right" width="350" trigger="click">
                <el-row>
                  <el-col><el-input v-model="item.attrs.placeholder" placeholder="提示文字placeholder" /></el-col>
                  <el-col><el-switch v-model="item.attrs.clearable" active-text="可清除" inactive-text="不可清除" /></el-col>
                </el-row>
                <el-button slot="reference">额外属性</el-button>
              </el-popover></el-col>
          </el-row>
          <el-row v-if="item.type=='select'||item.type=='checkbox-group'||item.type=='radio-group'">

            <el-col :span="12"><el-switch :value="item.url!=undefined" active-text="远程获取列表"  inactive-text="固定列表" @change="(e)=>ListGetDataMethodChange(e,item)"/></el-col>
              <el-col :span="12" v-if="item.url!=undefined"><el-input v-model="item.url" clearable placeholder="远程列表数据url" /></el-col>
          </el-row>
        </div>
      </el-form-item>

      <el-form-item label="" prop="codeContent">
        <el-button type="primary" @click="submitForm">生成 vue 代码</el-button>
      </el-form-item>
    </el-form>

    <div>
      生成的页面放在page目录下各个文件内
      对于需要在侧边栏显示的菜单链接页面，在lib目录下得ums_privs.json/wms_privs.json/oms_privs.json各模块的菜单表中进行配置。
      若不是会在侧边栏中显示链接的页面，要在lib目录下page-cmp-register.js文件中进行单独的页面注册。
      routes.push({ name: '角色编辑', path: '/page/user/user_role_edit',
      component: () => import('@/page/user/user_role_edit.vue') })
      如上述代码配置页面名称，路径。
    </div>
    <!--  在页面中定义以下组件 -->
    <ex-export-form ref="emsExportForm"></ex-export-form>
  </div>
</template>
<script>
let searchItemOptions = [
  { label: "文字输入", value: "input" },
  { label: "下拉选择(可单选多选)", value: "select" },
  { label: "单选排列框", value: "radio-group" },
  { label: "多选排列框", value: "checkbox-group" },
  { label: "时间选择", value: "time-picker" },
  { label: "日期时间选择", value: "date-picker" },
  { label: "计数器", value: "input-number" },
  { label: "开关", value: "switch" },
  { label: "纯文字显示", value: "text" },
];
export default {
  data() {
    return {
      dialogVisible: false,
      saveButtonDisabled: false,
      formValue: {
        listUrl: "",
        detailUrl: "",
        delUrl: "",
        submitUrl: "",
        domainCnName: "",
        codeContent: "",

        systemType: "apollo",
        formType: "dialog",
        saveBtnType: "float",
      },
      searchForm: {
        main: [],
        hide: [],
      },
      searchOptions: [
        { label: "默认显示", value: "main", children: searchItemOptions },
        { label: "需展开", value: "hide", children: searchItemOptions },
      ],
      rules: {
        fileName: [
          { required: true, message: "输出文件名不能为空", trigger: "blur" },
        ],
        formId: [
          { required: true, message: "请输入表单 el_id", trigger: "blur" },
        ],
        gridPanelElId: [
          { required: true, message: "请输入表格 el_id", trigger: "blur" },
        ],
        listUrl: [
          { required: true, message: "请输入查询列表 url", trigger: "blur" },
        ],
        detailUrl: [
          { required: true, message: "请输入详情页 url", trigger: "blur" },
        ],
        delUrl: [
          { required: true, message: "请输入删除 url", trigger: "blur" },
        ],
        submitUrl: [
          { required: true, message: "请输入提交 url", trigger: "blur" },
        ],
        domainCnName: [
          { required: true, message: "请输入对象名称", trigger: "blur" },
        ],

        codeContent: [
          { required: true, message: "代码内容不能为空", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    var _this = this;
  },

  destroyed() { },

  methods: {
    ListGetDataMethodChange(isUrl,item){

      if(isUrl){
        
        this.$set(item,'url',"")
        this.$delete(item,'items')
      }else{
        
        this.$set(item,'items',[])
        this.$delete(item,'url')
      }
    },
    submitForm() {
      var _this = this;
      _this.saveButtonDisabled = true;

      console.log(_this.formValue);

      _this["$refs"]["appJobFormEl"].validate(function (valid) {
        if (valid) {
          // 触发下载操作
          _this.$refs["emsExportForm"].doExport(
            "/galileo-auto/vue/CodeRpc/generateCode.json",
            _this.formValue
          );
        } else {
          _this.saveButtonDisabled = false;
          return false;
        }
      });
    },
    searchHandleChange(e) {
      this.searchForm[e[0]].push({ label: "", key: "", type: e[1], attrs: { clearable: true } });
    },
  },
};
</script>
<style>
.el-radio__label {
  font-size: 12px;
  padding-left: 10px;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.searchItemDiv {
  margin: 3px;
  padding: 3px;
  border: 1px silver dashed;
}
</style>